<div class="grid_x manuoContent jqx">
    <div id="tab">
        <ul style="margin-left: 3px;">
            <li>jqxGrid</li>
            <li>Grouping</li>
            <li>Filtering</li>
            <li>Sorting</li>
            <li>Paging</li>
            <li>Row selection</li>
            <li>Cell editting</li>
            <li>Menu</li>
            <li>Setting</li>
        </ul>
        <div>
            <div class="pt8 pl8 pb8 pr8 myContent">
                <p>Grid</p>
                <img src="{{base_url()}}syslib/sysimages/guide/0.jpg"/>
                <br/><br/><br/>
                <p>Menu</p>
                <img src="{{base_url()}}syslib/sysimages/guide/menu.jpg"/>
                <br/><br/>
                <p>Head</p>
                <img src="{{base_url()}}syslib/sysimages/guide/head.png"/>
                <br/><br/>
                <p>Columns</p>
                <img src="{{base_url()}}syslib/sysimages/guide/columns.png"/>
                <br/><br/>
                <p>Filtering</p>
                <img src="{{base_url()}}syslib/sysimages/guide/filter.png"/>
                <br/><br/>
                <p>Data</p>
                <img src="{{base_url()}}syslib/sysimages/guide/data.png"/>
                <br/><br/>
                <p>Paging</p>
                <img src="{{base_url()}}syslib/sysimages/guide/paging.png"/>
            </div>
        </div>
        <div>
            <div class="pt8 pl8 pb8 pr8">
                <p>Kéo thả cột cần group vào khu vực head phía trên tiêu đề cột</p>
                <img src="{{base_url()}}syslib/sysimages/guide/grouping.png"/>
                <br/><br/>
                <p>Kết quả</p>
                <img src="{{base_url()}}syslib/sysimages/guide/grouping_finish.png"/>
            </div>
        </div>
        <div>
            <div class="pt8 pl8 pb8 pr8">
                <p>Bộ lọc dữ liệu giúp tìm kiếm, chọn lọc dữ liệu nhanh chóng. bao gồm các dạng sau</p><br/>
                <p>Filter Text, tìm kiếm dữ liệu ứng với từ khóa đã nhập.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/filter_text.png"/>
                <br/><br/>
                <p>Filter Lis, tìm kiếm dữ liệu ứng với danh sách từ khóa đã chọn</p>
                <img src="{{base_url()}}syslib/sysimages/guide/filter_list.png"/>
                <br/><br/>
                <p>Filter Number</p>
                <img src="{{base_url()}}syslib/sysimages/guide/filter_number.png"/>
                <br/><br/>
                <p>Filter Date, tìm kiếm dữ liệu ngày tháng trong khoảng thời gian.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/filter_date.png"/>
                <br/><br/>
            </div>
        </div>
        <div>
            <div class="pt8 pl8 pb8 pr8">
                <p>Sorting</p><br/>
                <p>Click vào column để thay đổi cách sắp xếp dữ liệu theo column</p>
                <img src="{{base_url()}}syslib/sysimages/guide/sorting.png"/>
            </div>
        </div>
        <div>
            <div class="pt8 pl8 pb8 pr8">
                <p>Paging</p><br/>
                <p>Dữ liệu được phân theo trang.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/paging.png"/>
            </div>
        </div>
        <div>
            <div class="pt8 pl8 pb8 pr8">
                <p>Rows Selection</p><br/>
                <p>Chọn nhiều dòng bằng cách ấn thêm Ctrl hoặc Shift rồi chọn các dòng cần chọn.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/rowselect_control.png"/>
                <br/><br/>
                <p>Hoặc có thể sử dụng chuột để chọn 1 khu vực các dòng.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/rowselect_drag.png"/>
                <br/><br/>
                <p>Sau khi chọn các dòng có thể kết hợp với menu để thực hiện các thao tác cần thiết.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/events.png"/>
            </div>
        </div>
        <div>
            <div class="pt8 pl8 pb8 pr8">
                <p>Cell editing</p><br/>
                <p>Ở phiên bản này hỗ trợ chỉnh sửa, cập nhật thông tin trực tiếp trên lưới</p><br/>
                <p>Double click chuột vào Cell muốn chỉnh sửa.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/editting.png"/>
                <br/><br/>
                <p>Ví dụ : Double click chuột vào Tình Trạng Đơn hàng để thay đổi trạng thái đơn hàng.<br/>
                    Ấn Enter(hoặc nhấp chuột ra khu vực khác) để đồng ý, ấn Esc để từ chối.
                </p>
                <img src="{{base_url()}}syslib/sysimages/guide/listchange.jpg"/>
            </div>
        </div>
        <div>
            <div class="pt8 pl8 pb8 pr8">
                <p>Menu</p><br/>
                <p>Có thể kết hợp thao tác trên nhiều dòng đã chọn.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/menu.png"/>
            </div>
        </div>
        <div>
            <div class="pt8 pl8 pb8 pr8">
                <p>Setting</p><br/>
                <p>Ấn vào nút Setting để mở khung tùy chỉnh.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/setting3.jpg"/>
                <br/><br/>
                <p>Tùy chỉnh hiện thị dữ liệu. và tùy chỉnh hiện thị các cột.</p>
                <img src="{{base_url()}}syslib/sysimages/guide/setting.png"/>
                <br/><br/>
                <p>
                    Ví dụ : Tùy chỉnh đơn hàng bao gồm. <br/>
<pre>
    ✓ Tùy chỉnh hiện đơn hàng đã xóa.
    ✓ Tùy chỉnh hiện đơn hàng theo trạng thái.
    ✓ Tùy chỉnh ẩn/hiện các cột.
</pre>                    
                </p>
                <img src="{{base_url()}}syslib/sysimages/guide/setting2.jpg"/>
            </div>
        </div>
    </div>
</div>